import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { postDetail } from '../../api'
import { ListItem } from '../../store/reducer/listReducer'
import { Image } from 'react-vant'
type Props = {}

const Index = (props: Props) => {
	const param = useParams()
	const id = param.id;
	const [item, setItem] = useState<ListItem | null>(null)

	const getDetail = async () => {
		if (typeof id !== 'undefined') {
			const resp = await postDetail({ id })
			setItem(resp.data.data)
		}
	}

	useEffect(() => {
		getDetail()
	}, [])

	return (
		<div>
			{
				item && (
					<>
						<Image src={ item.url }/>
						<h2>{ item.title }</h2>
						<p>{ item.desc }</p>
					</>
				)
			}

		</div>
	)
}

export default Index